<template>
	<view class="root-view">
		<view class="search-box">
			<u-search v-model="keyword" @search="keysearch" placeholder="搜索产品型号..." height="74" :animation="true" bg-color="#f6f6f6"></u-search>
		</view>
		
		<view class="device-list">
			<u-radio-group v-model="value" @change="radioGroupChange" :wrap="true" size="40"  >
				<u-radio 
					@change="radioChange" 
					v-for="(item, index) in deviceList" :key="index" 
					:name="item.name"
					:disabled="item.disabled"
				>
					<view class="device-item">
						<view class="item-head">
							<u-image width="152" height="152" :src="item.img">
								<u-loading slot="loading"></u-loading>
							</u-image>
						</view>
						<view class="item-body">
							<view class="item-title">
								{{item.title}}
							</view>
							<view class="item-desc">
								{{item.desc}}
							</view>
						</view>
					</view>
				</u-radio>
			</u-radio-group>
		</view>
	
		<view class="coco-operation save-operation safe-bottom">
			<view class="coco-operation-btns">
				<view class="btn-cell">
					<button class="coco-btn theme round lg shadow" @click="jump('/pages/device/add-device')">下一步</button>
				</view>
			</view>
		</view>
		
		<view class="safe-bottom">
			<u-gap height="144"></u-gap>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				deviceList: [
					{
						name: 'a',
						title: '厨房智能滤水器滤芯净水器',
						desc:'可直接饮用 厨下式安装 活性炭',
						img:'/static/images/device/01.jpg',
						disabled: false
					},
					{
						name: 'b',
						title: 'PP棉前置后置活性炭滤芯',
						desc:'1A厨下式5/400G1增强芯',
						img:'/static/images/device/02.jpg',
						disabled: false
					},
					{
						name: 'c',
						title: '反渗透自来水过滤器1600S',
						desc:'高水效升级款 PPF棉 RO膜',
						img:'/static/images/device/03.jpg',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'a',
			};
		},
		methods:{
			jump(path) {
				this.$tools.routerTo(path);
			},
			keysearch(){
				 
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #fff;
	}
	.search-box{
		position: relative;
		width: 100%;
		padding: 22upx 24upx;
		background-color: #fff;
		/deep/.u-search{
			.u-action{
				color: $coco-theme-color;
			}
		}
		 
	}
	.device-list{
		/deep/.u-radio-group{
			.u-radio{
				position: relative;
				display: flex;
				flex-direction: row-reverse;
				padding: 16upx 24upx;
				&::after{
					position: absolute;
					right: 0;
					bottom: 0;
					left: 196upx;
					height: 1px;
					content: '';
					transform: scaleY(.5);
					background-color: $u-border-color;
				}
			}
			.u-radio__label{
				flex: 1;
				min-width: 0;
				margin: 0;
				margin-right: 20upx;
			}
		}
		.device-item{
			display: flex;
			align-items: center;
			line-height: 1.2;
			.item-head{
				margin-right: 20upx;
			}
			.item-body{
				flex: 1;
				min-width: 0;
			}
			.item-title{
				font-size: 30upx;
				font-weight: 500;
			}
			.item-desc{
				font-size: 24upx;
				color: $u-tips-color;
				margin-top: 16upx;
			}
		}
	}
	
	.save-operation{
		height: 144upx;
		background-color: #fff;
		box-shadow: none;
		&::after{
			display: none;
		}
		.coco-operation-btns{
			padding-left: 60upx;
			padding-right: 60upx;
			.lg{
				display: flex;
			}
		}
	}
</style>
